<template>
  <div id="scoreList">
    <h2>本科成绩列表</h2>
    <table >
      <tr>
        <th class="listNum">序号</th>
        <th class="course">课程名</th>
        <th class="credit">学分</th>
        <th>课程属性</th>
        <th>成绩</th>
      </tr>
      <tr v-for="(item,index) in scoreList" class="listItem" :key="index">
        <td  class="listNum">{{ index+1 }}</td>
        <td class="course">{{ item.course }}</td>
        <td class="credit">{{ item.credit }}</td>
        <td>{{ item.attrs }}</td>
        <td>{{ item.score }}</td>
      </tr>
    </table> 
  </div>
</template>

<script>
import Bus from "../../common/bus";
import store from "../../common/store";

export default {
  data() {
    return {
      scoreList: []
    };
  },
  methods: {},
  computed: {},
  created() {
    this.scoreList = store.state.score;
  }
};
</script>
<style lang="less" scoped>
@import "../../assets/less/baseDetail.less";

#scoreList{
  width: 100%;
  height: calc(~'100% - 46px');
  overflow: scroll;
}
td {
  font-size: 12px;
}
th {
  font-size: 14px;
}
.listItem {
  width: 100%;
}
h2{
  font-size: 17px;
  line-height: 40px;
  text-align: center;
}

#scoreList  td,#scoreList th{
  // float: left;
  width:17%;
  line-height: 30px;
  text-align: center;
  border: 1px solid #ddd;
  border-top:none;
}
#scoreList .course{
  width: 40%;
  word-wrap: break-word; 
  word-break: normal; 
}
#scoreList .listNum,#scoreList .credit{
  width: 13%;
}
table{ 
table-layout:fixed; 
empty-cells:show; 
border-collapse: collapse; 
margin:5px auto;
border-top: 1px solid #ddd; 
} 
// td{ 
// height:30px; 
// } 
</style>